<%--
  Created by IntelliJ IDEA.
  User: 13478
  Date: 2024/11/20
  Time: 下午1:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="stylesheet" href="static/css/product.css">
    <script src="static/vue-2.6.10.js"></script>
    <script src="static/axios.min.js"></script>
</head>
<style>
    a{
        text-decoration:none;
    }

    .product-info{
        font-size:28px;
    }
    .product-img{
        width:30%;
        height:60%;
        text-align:center;
    }
    img{
        weight:85px;
        height:150px;
    }
    table{
        margin:0 auto;
    }
</style>
<body>

<div class="product-list" id="app">
    <table width="900" height="700" border="2">
        <tr class="product-item" v-for="product in product_list ">
            <td class="product-img">
                <img :src="imagesUrl(product.picture)" alt="">
            </td>
            <td class="product-info" >
                <div>品名：<span>{{product.name}}</span></div>
                <div>原价：<span>{{product.market_price}}</span></div>
                <div>现价：<span>{{product.sell_price}}</span></div>
                <div>简介：<span>{{product.description}}</span></div>
                <div>查看详细内容</div>
            </td>
        </tr>
    </table>
</div>
<script>
    let vue =new Vue({
        el:'#app',
        data:{

            product_list:[],
            product:{
                "name":"猪猪"
            }
        },
        created(){
            //异部请求
            axios.get("/product_list.do").then(function(result){
                //使用获取到的数据替换商品列表
                vue.product_list = result.data
            });
        },
        methods:{
            imagesUrl: function(img_name){
                return "static/img/productImages/"+img_name;
            }
        }
    });
</script>

</body>
</html>